<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const progress = ref(0)
let startTime: number
let animationFrame: number

const animate = (timestamp: number) => {
  // if (!startTime) startTime = timestamp
  if (startTime === undefined) startTime = timestamp
  const elapsed = timestamp - startTime
  progress.value = Math.min(elapsed / 10000 * 100, 100) // 10秒完成

  if (elapsed < 10000) {
    animationFrame = requestAnimationFrame(animate)
  } else {
    // 加载完成后跳转
    // router.push({
    //   path: '/quming/pay',
    //   query: { oid: route.query.oid }
    // })
    if (route.query.oid) {
      router.push({
        path: '/quming/pay',
        query: { oid: route.query.oid }
      })
    } else {
      console.warn('缺少 oid 参数，跳转失败')
    }
  }
}

onMounted(() => {
  animationFrame = requestAnimationFrame(animate)
})

onBeforeUnmount(() => {
  cancelAnimationFrame(animationFrame)
  
})
</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/quming'"/>
    <img 
      src="/assets/images/quming/loadingye.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <div class="absolute inset-0 flex flex-col items-center justify-center gap-6">
      <div class="relative w-[130px] h-[130px]">
        <img 
          src="/assets/images/quming/yu.png"
          class="w-[70px] h-[70px] absolute left-1/2 top-1/2 
                 -translate-x-1/2 -translate-y-1/2
                 animate-rotate-cw z-20"
        />
      </div>

      <!-- 进度条容器 -->
      <div class="flex flex-col items-center gap-2 w-full max-w-[280px] px-4">
        <span class="text-white text-sm font-bold glow-text">
          能量加载中...名字已生成{{ Math.floor(progress) }}%...
        </span>
        <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
          <div 
            class="h-full bg-gradient-to-r from-[#FFD700] to-[#FFA500] transition-all duration-100"
            :style="{ width: `${progress}%` }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.glow-text {
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.bg-gradient-to-r.from-\[\#FFD700\].to-\[\#FFA500\] {
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

@keyframes rotate-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.animate-rotate-cw {
  animation: rotate-cw 1s linear infinite;
}
</style>